<template>
  <div class="my-custiom">
    <div class="my-custiom-content">
      <div class="my-custiom-title">
        待办事宜
        <div class="date-picker-container">
          <svg t="1742182022027" class="icon" viewBox="0 0 1088 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
            p-id="4978" width="200" height="200">
            <path
              d="M558.784 128c127.04 0 243.648 62.4 314.88 164.928 15.36 22.08 28.16 45.568 38.528 70.208h-58.88a329.152 329.152 0 0 0-294.528-181.504A330.112 330.112 0 0 0 228.992 512a330.112 330.112 0 0 0 329.792 330.432c116.48 0 218.88-60.544 277.568-151.872l61.824 0.064A383.168 383.168 0 0 1 175.488 512c0-212.096 171.648-384 383.36-384z m32 175.616v194.56l116.352 109.632-43.904 46.528-126.4-119.04-10.048-9.472V303.616h64z m280.96 250.816v64h-103.936v-64h104z m104.064-119.04v64h-208v-64h208z"
              fill="#303133" p-id="4979"></path>
          </svg> <a-range-picker v-model:value="dateRange" />
          <button class="refresh-btn" @click="handlePeriodClick">
            <svg t="1742181855296" class="icon" viewBox="0 0 1027 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
              p-id="3936" width="200" height="200">
              <path
                d="M1011.17364 948.589688L787.751724 725.167772A444.036016 444.036016 0 1 0 725.177543 787.741954l223.421916 223.421915a45.32617 45.32617 0 0 0 31.28709 12.83573 44.12282 44.12282 0 0 0 31.287091-75.409911zM91.814518 444.386191A353.784793 353.784793 0 1 1 444.395961 799.374333 353.784793 353.784793 0 0 1 91.814518 444.386191z"
                fill="#e6e6e6" p-id="3937" data-spm-anchor-id="a313x.search_index.0.i8.3bb43a81lQ6WC6" class="selected">
              </path>
            </svg>
            查询
          </button>
        </div>
      </div>
      <div class="my-custiom-content-text">
        <div class="data-container">
          <div class="data-container">
            <a-table :dataSource="reception" :columns="columns" :scroll="{ x: 'max-content' }" class="full-width-table">
            </a-table>
          </div>
        </div>

      </div>
    </div>
  </div>
</template>

<script lang="ts">
// 定义组件
import { Component, Vue, Prop } from 'vue-property-decorator';
import moment from 'moment';
import Api from '../api/api';
@Component
export default class TestPage extends Vue {
  // @Prop({ type: String, default: '' })
  // userId!: string;

  // @Prop({ type: Array || null, default: null })
  // roleIds!: any[] | null;

  // @Prop({ type: Array || null, default: null })
  // roleName!: any[] | null;

  // @Prop({ type: String, default: '' })
  // phone!: string;

  // @Prop({ type: String, default: '' })
  // email!: string;

  // @Prop({ type: String, default: '' })
  // deptName!: string;

  // @Prop({ type: String, default: '' })
  // deptId!: string;

  reception: any = []  //接收情况统计
  dateRange: any = [
    moment().subtract(1, 'month'), // 默认开始时间：上个月的今天
    moment() // 默认结束时间：今天
  ]
  columns: any = [
    {
      title: '标题',
      dataIndex: 'instanceName',
      key: 'instanceName',
    },
    {
      title: '创建人',
      dataIndex: 'originatorName',
      key: 'originatorName',
    },
    {
      title: '当前处理人',
      dataIndex: 'participantName',
      key: 'participantName',
    },
    {
      title: '创建时间',
      dataIndex: 'receiveTime',
      key: 'receiveTime',
    },
  ];
  created() {
    this.handlePeriodClick()
  }


  async handlePeriodClick() {
    if (!this.dateRange || this.dateRange.length !== 2) { // 添加数组长度校验
      this.$message.error('请选择时间范围!')
      this.reception = [];
      return // 添加return停止执行
    }
    const [startMoment, endMoment] = this.dateRange;
    const params = {
      startTime: startMoment.format('YYYY-MM-DD'),  // 格式化为年-月-日
      endTime: endMoment.format('YYYY-MM-DD')
    };

    const { data } = await Api.exportLclb(params);
    console.log('接口返回:', data);
    if (data.content.length > 0) {
      this.reception = data.content;
    } else {
      this.$message.error('获取数据失败!');
    }
  }
}

</script>

<style lang="less" scoped>
.my-custiom {
  height: 100%;
  width: 100%;


}

.my-custiom-content {
  padding: 20px;
  height: 100%;
  position: relative;
  background-color: #fff;
}

.my-custiom-title {
  font-size: 17px;
  font-weight: bold;
  margin-bottom: 8px;
  color: black;
  position: relative;
  padding-bottom: 10px; // 新增内边距给分割线留空间
  display: flex;
  justify-content: space-between;
  align-items: center;


  .date-picker-container {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-left: auto; // 强制右对齐

    .ant-picker {
      width: 240px; // 给日期选择器固定宽度
    }

  }




  &::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 1px;
    background-color: #ccc;
  }

  .refresh-btn {
    padding: 2px 6px;
    background: #1890ff;
    color: white;
    border: none;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    cursor: pointer;
    font-size: 14px;
    transition: opacity 0.3s;

    &:hover {
      opacity: 0.8;
    }

    .icon {
      width: 14px;
      height: 14px;
      margin: 0;
    }
  }
}

.my-custiom-content-text {
  font-size: 15px;
  color: black;
  padding: 5px;
  height: calc(100% - 60px); // 新增高度计算
  overflow: hidden; // 禁止外层滚动
}

.filter-container {
  display: flex;
  justify-content: flex-end;
  gap: 20px;
  margin-bottom: 15px;

  p {
    cursor: pointer;
    color: #666;
    transition: color 0.3s;
    font-size: 16px;

    &.active {
      color: #1890ff;
      font-weight: 500;
    }

    &:hover {
      color: #1890ff;
    }
  }
}

.data-container {
  width: 100%;
  height: 100%;
  overflow-x: auto;

  // 添加以下新样式
  :deep(.ant-table) {
    max-height: calc(100vh - 220px) !important;
    overflow-y: auto !important;

    .ant-table-body {
      min-height: 200px; // 最小高度保持表格可视
    }
  }

  :deep(.full-width-table) {
    width: 100%;
    min-width: auto !important;

    .ant-table-container {
      width: 100% !important;
    }
  }
}

.data-item.contract {
  display: flex;
  align-items: center;
  margin-right: auto; // 强制档案整理靠左
  gap: 8px;

  svg {
    width: 48px;
    height: 48px;
    margin-right: 8px;
  }
}

.data-item:not(.contract) {
  margin-left: auto; // 其他档案靠右
  justify-content: center;
  display: flex;
  flex-direction: column;

  // align-items: flex-end; // 右侧对齐
  .data-column {
    align-items: center;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
  }
}

.data-column {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 4px;
}

.value {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  line-height: 1.2;
}

.label {
  font-size: 16px;
  color: #666;
  line-height: 1.4;
}

.icon {
  width: 24px;
  height: 24px;
  margin-left: 8px;
  margin-top: -4px;
}
</style>
